<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>BASF Controller App</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Le styles -->
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<link href="css/additionals.css" rel="stylesheet">
		<style type="text/css">
			body {
				padding-top: 60px;
				padding-bottom: 40px;
			}
			.sidebar-nav {
				padding: 9px 0;
			}
		</style>
		<style>
			table {
				table-layout: fixed;
			}
			table th, table td {
				overflow: hidden;
			}
		</style>
		<link rel="stylesheet" href="css/main.css">

		<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="http://twitter.github.com/bootstrap/assets/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
	</head>

	<body>

		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
					<a class="brand" href="#"><!--img src="./img/logo.svg" width="100px"--></img> Controller App</a>
					<div class="nav-collapse collapse">
						<p class="navbar-text pull-right">
							Logged in as <a href="#" class="navbar-link">Max Musterman</a>
						</p>
						<ul class="nav">
							<li class="active">
								<a href="#">Enter Sales Volumes</a>
							</li>
							<li>
								<a href="#about">About</a>
							</li>
						</ul>
					</div><!--/.nav-collapse -->
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span2">
					<div class="well sidebar-nav">
						<ul class="nav nav-list">
							<li class="nav-header">
								Sales Products BU C1
							</li>
							<li class="active">
								<a href="#"><small>Neopentylglycol</small></a>
							</li>
							<li>
								<a href="#"><small>Polytetrahydrofuran</small></a>
							</li>
							<li>
								<a href="#"><small>Butanediol</small></a>
							</li>
							<li class="nav-header">
								Sales Products BU C2
							</li>
							<li>
								<a href="#"><small>Formic Acid</small></a>
							</li>
							<li>
								<a href="#"><small>Butanediol</small></a>
							</li>
							<li>
								<a href="#"><small>Tetrahydrofuran</small></a>
							</li>
						</ul>
					</div><!--/.well -->
				</div><!--/span-->

				<div class="span10">
					<div class="accordion-group" style="background-color: #EEEEEE;">
						<div class="accordion-heading" >
							<a class="accordion-toggle pull-right"  href="#collapseOne" data-parent="#accordion2" data-toggle="collapse"> <small> Collapse</small> </a>
						</div>
						<div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
							<div class="accordion-inner">
								<table class="table table-condensed">
									<thead>
										<tr>
											<th style="width: 15%">Sales Product</th>
											<th style="width: 15%">Raw Materials</th>
											<th style="width: 15%">Frequency</th>
											<th style="width: 15%">Region</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Neopentylglycol</td>
											<td><a href="#" > <img src="img/tree5.png" style="width: 20%"> </a> </td>
											<td>Monthly</td>
											<td>Europe</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

					</div>

					<div id="messages" class="accordion-group" style="background-color: #DFF0D8;">

					</div>

					<div id="main-table" class="row-fluid" >
						<div id="inputform" >

							<table id="sales-volume" class="table table-striped table-hover">
								<thead>
									<tr>
										<th style="width: 15%">Time Period</th>
										<th style="width: 15%">Forecast</th>
										<th style="width: 15%">Pass-Through Factor</th>
										<th style="width: 15%">Historical Average</th>
										<th style="width: 40%">Comment</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
							
							<div class="controls pull-left">
								<input type="file" id="file1" style="display:none">
								
								<button type="button" class="btn btn-primary" onclick="openFileOption();return;">
									Upload file
								</button>
							</div>								


							<div class="controls pull-right">
								
								
								<button type="submit" class="btn btn-primary" onclick="resetAll();">
									Reset
								</button>
								<button type="button" class="btn btn-primary" onclick="validate();">
									Validate
								</button>
								<button type="submit" class="btn btn-primary disabled" id="finalsubmit" onclick="finalSubmit()">
									Save
								</button>
							</div>
						</div>
					</div>

					<hr>

					<footer>
						<p>
							© Uni Mannheim 2012
						</p>
					</footer>

				</div><!--/.fluid-container-->

				<!-- Le javascript
				================================================== -->
				<!-- Placed at the end of the document so the pages load faster -->
				<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
				<script>
					window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')
				</script>
				<script src="js/underscore.js"></script>
			
				<!-- month template that is used in main.js by underscore -->
				<script id="month-template" type="text/template">
						<tr>
										<td class="ctr-month"><%= month %></td>
										<td class="ctr-val" >
										<input type="text" class="input-small" onchange="resetRow(this)" value="<%= forecast %>" />
										</td>
										<td class="ctr-ptf">
										<div class="input-append">
											<input type="text" class="input-mini" placeholder="50"/>
											<span class="add-on">%</span>
										</div></td>
										<td class="ctr-forecast">
											<a style="color:black" rel="tooltip" href="#"  data-original-title=
												"Calculation is based on last 5 years" data-content="<br/> <table>
																<thead>
																	<tr>
																		<th><small>2007</small></th>
																		<th><small>2008</small></th>
																		<th><small>2009</small></th>
																		<th><small>2010</small></th>
																		<th><small>2011</small></th>
																	</tr>
																</thead>
																<tbody>
																	<tr>
																		<td><small>39.000</small></td>
																		<td><small>42.000</small></td>
																		<td><small>42.000</small></td>
																		<td><small>46.000</small></td>
																		<td><small>44.000</small></td>
																	</tr>
																</tbody>
															</table>" > 43.600 </a>
										</td>
										<td class="ctr-comment"><span class="label">Validation required</span>
										<div class="ctr-justify">
											You can either change the value or <a data-toggle="collapse-next" data-target="> div">enter an explanation</a> for the deviation.
											<div class="collapse">
												<textarea></textarea>
												<div class="ctr-textcomment"></div>
												<button onclick="saveInputs(this);" class="btn butsave" type="button">
													Save
												</button>
												<button onclick="switchEdit(this);" class="btn butedit" type="button">
													Edit
												</button>
											</div>
										</div></td>

									</tr>
				</script>
			
				<script src="js/bootstrap.js"></script>
				<script src="js/main.js"></script>
	</body>
</html>
